<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/bjlb.png" alt="">
      </div>
      <h2>报警列表<span v-if="$store.state.building">东湖花园小区{{ $store.state.listData.infoS[0].buildNo < 10 ?
          (Array(2).join(0) + $store.state.listData.infoS[0].buildNo).slice(-2) :
          $store.state.listData.infoS[0].buildNo
      }}栋</span>
      </h2>
    </div>
    <div class="tables">
      <el-table :data="tableData" :row-style="cellStyle" size="mini" stripe style="width: 100%"
        :header-cell-style="{ color: '#17E8FF', fontSize: '0.12rem' }" :cell-style="{ fontSize: '0.12rem' }">
        <!-- <af-table-column prop="cont1" label="联络人">
        </af-table-column> -->
        <el-table-column :show-overflow-tooltip="true" min-width="200px" prop="cont2" label="地址">
        </el-table-column>
        <af-table-column prop="cont3" label="用户标签">
        </af-table-column>
        <af-table-column prop="cont4" label="报警类型">
        </af-table-column>
        <af-table-column prop="cont5" label="报警时间">
        </af-table-column>
        <af-table-column prop="cont6" label="处理状态">
        </af-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  name: 'chart',
  data() {
    return {
      tableData: [],
      tenantid: 1129,
      community: 1,
      buildNo: '',
      arr: []
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  methods: {
    changeBuildNo(id) {
      this.buildNo = id
      this.getData()
    },
    async getData() {
      const res = await api.alramList({ tenantid: this.tenantid, community: this.community, buildNo: this.buildNo })
      this.arr = res.data
      this.tableData = []
      res.data.forEach((item, index) => {
        res.data[index].alarmTime = item.alarmTime.substring(5, item.alarmTime.length - 3)
        if (item.clientType == 0) {
          item.clientType = '低保户'
        } else if (item.clientType == 1) {
          item.clientType = '上班族'
        } else if (item.clientType == 2) {
          item.clientType = '孤寡老人'
        } else if (item.clientType == 3) {
          item.clientType = '空置房'
        }else if (item.clientType == 4) {
          item.clientType = '店里'
        } else if (item.clientType == 5) {
          item.clientType = '异常用户'
        } else if (item.clientType == 6) {
          item.clientType = '全部用户'
        }
        // console.log(item.alarmTime)
        this.tableData.push({
          cont1: `${item.userName}`,
          cont2: `${item.address}`,
          cont3: item.clientType,
          cont4: item.alarmValue,
          cont5: item.alarmTime,
          cont6: item.alarmStatusName
        })
      })
    },
    //让table的字变成红色
    cellStyle(row) {
      // console.log(row.column.label, row.row.conclusion)
      let colorObj = {}
      if (row.row.cont6 == '未处理') {
        colorObj.color = 'red'
      }
      return colorObj
    }
  }
}
</script>

<style lang="scss" scoped>
.tables {
  width: 100%;
  height: 100%;

  .el-table {
    font-size: .16rem;
    margin-top: 0.5rem;
    padding: 0 0.1rem;
    width: 100%;
    height: 77%;
    overflow: scroll;
    position: relative;
  }
}

// ::-webkit-scrollbar {
//   width: 2px;
//   height: 2px;
//   width: 0.1rem;
//   height: 0.1rem;
// }
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(-30deg,
      rgba(14, 67, 107, 0.4) 0%,
      rgba(85, 136, 238, 0.6) 100%);
}

::-webkit-scrollbar-corner {
  background: linear-gradient(-30deg,
      rgba(14, 67, 107, 0.4) 0%,
      rgba(85, 136, 238, 0.6) 100%);
}
</style>
